<!--入口模板-->
<template>
  <!-- 使用 Responsive 组件包裹整个页面，以实现响应式布局 -->
  <Responsive>
    <!-- 无论在哪个路由，都显示 LoginBackground 组件作为背景 -->
    <LoginBackground
      class="fixed top-0 left-0 w-full h-full z-0 opacity-20 dark:opacity-100"
    />
    <!-- 条件性渲染 Layout 组件，除了首页和登录页之外的路由使用 Layout 组件包裹 -->
    <Layout v-if="!isHomeOrLoginRoute">
      <!-- 使用 router-view 组件来渲染匹配的路由组件，并使用 fade 过渡效果 -->
      <router-view class="relative z-10" v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </Layout>
     <!-- 对于首页和登录页，直接渲染 router-view 组件 -->
    <router-view v-else />
  </Responsive>
</template>
<script setup>
// 导入所需的 Vue 组件和 Composition API 函数
import Layout from "./layouts/index.vue";
import Responsive from "@/components/Responsive.vue";
import { computed } from "vue";
import { useRoute } from "vue-router";
import LoginBackground from "@/components/LoginBackground.vue";
import "nprogress/nprogress.css";// 导入NProgress样式文件
import "@/assets/common-to-nprogress.scss";
// 使用 useRoute 钩子来获取当前路由对象
const route = useRoute();
// 使用 computed 计算属性来判断当前是否是首页或登录页
const isHomeOrLoginRoute = computed(() => {
  return route.path === "/" || route.path === "/login"|| route.path === "/signup";
});
</script>
<style>
/* 定义 fade 过渡效果的 CSS 动画 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter-from {
  opacity: 0;
  transform: translateY(200px);
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  transform: translateY(0px);
}
/* 隐藏 WebKit 浏览器的滚动条 */
:root::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
</style>
<style>
/* 定义 Element Plus 卡片组件在暗黑模式下的样式 */
html.dark .el-card {
  --el-border-color-light: #1f2937 !important;
  --el-card-bg-color: rgb(17 24 39 / 0.7) !important;
}
/* 定义自定义卡片背景样式，并覆盖 Element Plus 卡片组件的默认样式 */
.bg-card {
  --el-border-color-light: #ffffff;
  --el-card-bg-color: rgb(255 255 255 / 0.7);
  --el-card-border-color: var(--el-border-color-light);
  background-color: var(--el-card-bg-color);
  border: none;
}

/* 暗黑模式下，调整自定义卡片背景样式 */
html.dark .bg-card {
  --el-border-color-light: #1f2937;
  --el-card-bg-color: rgb(17 24 39 / 0.7);
  --el-card-border-color: var(--el-border-color-light);
  background-color: var(--el-card-bg-color);
  border: 1px solid var(--el-card-border-color);
}
/* 调整 Element Plus 表格单元格的内边距 */
.el-table .el-table__cell {
  padding: 1rem 0 !important;
}
</style>
